{% extends "section.html" %}

{% block body %}
{% set page_class = "casts list" %}
{% endblock body %}

{% block header %}
{# This value is matched by the config.extra.menu.main->section #}
{% set current_section = "casts" %}
{{ macros_header::header(current_section=current_section)}}
{% endblock header %}

{% block content %}

<svg class="w-full h-full" viewBox="0 0 1512 234" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="dark:fill-zinc-700" d="M1512 0V234H0L1512 0Z" fill="#7A1307"/>
  <path class="dark:fill-zinc-900" d="M1512 29V234H0L1512 29Z" fill="#c12110"/>
</svg>

<div class="bg-redrust dark:bg-zinc-900 text-white px-2">
  <h1 class="text-center text-3xl mb-3 font-semibold text-white">Loco Casts</h1>
  <h2 class="text-center text-xl text-red-50 mb-12">Short and focused tutorials for learning various Loco features</h2>
</div>

<div class="container" role="document">
<div class="content mx-auto max-w-[52rem] my-8">
    <div class="flex flex-col card-list gap-10">
      {% for page in paginator.pages %}
      <a class="flex flex-col sm:flex-row items-center gap-6 stretched-link text-body hover:bg-gray-50 dark:hover:bg-gray-900 rounded-sm p-4" href="{{ page.permalink }}">
        <div class="dark:border-gray-700 dark:rounded-sm dark:border">
        {{ youtube::thumb(id=page.extra.id) }}
        </div>
        <div>
          <div>
            <h2 class="text-lg font-semibold  -mt-1">{{ page.title }} </h2>
            <p class="text-gray-500">{{page.description | safe }}</p>
          </div>
          <div class="flex mt-2 items-center">
            <div class="text-sm text-sky-500 font-medium">
              Watch
            </div>
            <svg class="relative mt-px overflow-visible ml-2.5 text-sky-300 dark:text-sky-700" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg>
          </div>
        </div>
      </a>
      {% endfor %}
      {% if paginator.previous or paginator.next %}
      {{ macros_section_nav::navigation(paginator=paginator) }}
      {% endif %}
    </div>
</div>
</div>

{% endblock content %}
